<template>
    <div class="main-page-content page-demo-form-base">

        <ContentHeader title="这里是基础表单" explain="这里是表单的基础描述">
            <template slot="content">
                <div >
                    这里是自定义内容
                </div>
            </template>
        </ContentHeader>

        <!-- page-content start -->
        <div class="page-content">
            <a-spin tip="Loading..." :spinning="show_loading">
                <a-form-model
                    ref="ruleForm"
                    :model="form_data"
                    :rules="rules"
                    :label-col="{ span: 7 }"
                    :wrapper-col="{ span: 10, }"
                >
                    <a-form-model-item ref="name" label="名称：" prop="name">
                        <a-input v-model="form_data.name"/>
                    </a-form-model-item>
                    <a-form-model-item label="风格：" prop="style">
                        <a-select v-model="form_data.style" placeholder="请选择您的风格">
                            <a-select-option value="1">风格一</a-select-option>
                            <a-select-option value="2">风格二</a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item label="生日：" required prop="birthday">
                        <a-date-picker
                            v-model="form_data.birthday"
                            type="date"
                            placeholder="请选择您的生日"
                            style="width: 100%;"
                        />
                    </a-form-model-item>
                    <a-form-model-item label="状态：" prop="status">
                        <a-switch v-model="form_data.status" />
                    </a-form-model-item>
                    <a-form-model-item label="类型：" prop="type">
                        <a-checkbox-group v-model="form_data.type">
                            <a-checkbox value="1" name="type">在线</a-checkbox>
                            <a-checkbox value="2" name="type">离线</a-checkbox>
                        </a-checkbox-group>
                    </a-form-model-item>
                    <a-form-model-item label="来源：" prop="resource">
                        <a-radio-group v-model="form_data.resource">
                            <a-radio value="1">线上</a-radio>
                            <a-radio value="2">线下</a-radio>
                        </a-radio-group>
                    </a-form-model-item>
                    <a-form-model-item label="备注：" prop="desc">
                        <a-input v-model="form_data.desc" type="textarea" />
                    </a-form-model-item>
                    <a-form-model-item :wrapper-col="{ span: 10, offset: 8 }">
                        <a-button type="primary" @click="onSubmit">提交</a-button>
                        <a-button style="margin-left: 10px;" @click="resetForm">重置</a-button>
                    </a-form-model-item>
                </a-form-model>
            </a-spin>
        </div>
        <!-- page-content end -->
    </div>
</template>

<script>
import ContentHeader from "@/components/content_header/content_header";
export default {
    components: {
        ContentHeader,
    },
    data(){
        return {
            // Loading 弹框
            "show_loading"    : false,
            // 表单内容
            "form_data": {
                "name"      : '',
                "style"     : undefined,
                "birthday"  : undefined,
                "status"    : false,
                "type"      : [],
                "resource"  : 0,
                "desc"      : '',
            },
            // 表单验证
            "rules": {
                "name"  : [
                    { required: true, message: '请填写您的名称', trigger: 'blur' },
                    { min: 3, max: 8, message: '请输入3~8个字', trigger: 'blur' },
                ],
                "style" : [{ required: true, message: '请选择风格', trigger: 'change' }],
                "birthday"  : [{ required: true, message: '请选择您的生日', trigger: 'change' }],
                "type"  : [
                    {
                        type: 'array',
                        required: true,
                        message: '请选择类型',
                        trigger: 'change',
                    },
                ],
                "resource"  : [
                    { required: true, message: '请选择来源', trigger: 'change' },
                ],
            },
        }
    },
    methods:{
        onSubmit() {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    this.show_loading = true;
                    setTimeout(()=>{
                        this.show_loading = false;
                        this.$message.info('提交成功');
                    },1500)
                    
                } else {
                    this.$message.warning('请先完成表单内容');
                    return false;
                }
            });
        },
        resetForm() {
            this.$refs.ruleForm.resetFields();
        },
    }
};
</script>